<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<meta name="Author" content="Tencent.AlloyTeam" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no,target-densitydpi=medium-dpi" />

	<link rel="stylesheet" type="text/css" href="css/mui-base.css" />
	<link rel="stylesheet" type="text/css" href="css/mui-button.css" />
	<style type="text/css">
		.container{
			padding: 10px;
		}
		h4{
			margin: 10px 0;
		}
	</style>
</head>

<div class="container">
	<h4>button</h4>
	<p style="margin-top:20px;">
		<button id="w_button" class="btn btn_white">
			<span class="btn_text">button</span>
		</button>
	</p>
	<p style="margin-top:20px;">
		<button id="g_button" class="btn btn_green" >
			<span class="btn_text">button</span>
		</button>
	</p>
	<p style="margin-top:20px;">
		<button id="bl_button" class="btn btn_black">
			<span class="btn_text">button</span>
		</button>
	</p>
	<p style="margin-top:20px;">
		<button id="b_button" class="btn btn_blue">
			<span class="btn_text">button</span>
		</button>
	</p>

	<h4>button with icon</h4>
	<p>
		<button id="w_icon_l_button" class="btn btn_white btn_icon">
			<span class="left_icon"></span>
			<span class="btn_text">button</span>
		</button>
		<button id="w_icon_r_button" class="btn btn_white btn_icon" style="margin-top:10px;">
			<span class="right_icon"></span>
			<span class="btn_text">button</span>
		</button>
	</p>
	<p>
		<button id="g_icon_l_button" class="btn btn_green btn_icon" style="margin-top:10px;">
			<span class="left_icon"></span>
			<span class="btn_text">button</span>
		</button>
		<button id="g_icon_r_button" class="btn btn_green btn_icon" style="margin-top:10px;">
			<span class="right_icon"></span>
			<span class="btn_text">button</span>
		</button>
	</p>
	<p style="margin-top:20px;">
		<button id="bl_icon_l_button" class="btn btn_black btn_icon">
			<span class="left_icon"></span>
			<span class="btn_text">button</span>
		</button>
		<button id="bl_icon_r_button" class="btn btn_black btn_icon" style="margin-top:10px;">
			<span class="right_icon"></span>
			<span class="btn_text">button</span>
		</button>
	</p>
	<p style="margin-top:20px;">
		<button id="b_icon_l_button" class="btn btn_blue btn_icon">
			<span class="left_icon"></span>
			<span class="btn_text">button</span>
		</button>
		<button id="b_icon_r_button" class="btn btn_blue btn_icon" style="margin-top:10px;">
			<span class="right_icon"></span>
			<span class="btn_text">button</span>
		</button>
	</p>

	<h4>buttons in group</h4>
	<div id="w_btn_list" class="btn_group" style="margin-bottom:10px;">
		<button class="btn btn_white"><span class="btn_text">1</span></button>
		<button class="btn btn_white"><span class="btn_text">2</span></button>
		<button class="btn btn_white"><span class="btn_text">3</span></button>
	</div>	
	<div id="w_v_btn_list" class="btn_group vertical" style="margin-bottom:10px;">
		<button class="btn btn_white"><span class="btn_text">1</span></button>
		<button class="btn btn_white"><span class="btn_text">2</span></button>
		<button class="btn btn_white"><span class="btn_text">3</span></button>
	</div>	
	<div id="g_btn_list" class="btn_group" style="margin-bottom:10px;">
		<button class="btn btn_green"><span class="btn_text">1</span></button>
		<button class="btn btn_green"><span class="btn_text">2</span></button>
		<button class="btn btn_green"><span class="btn_text">3</span></button>
	</div>	
	<div id="g_v_btn_list" class="btn_group vertical" style="margin-bottom:10px;">
		<button class="btn btn_green"><span class="btn_text">1</span></button>
		<button class="btn btn_green"><span class="btn_text">2</span></button>
		<button class="btn btn_green"><span class="btn_text">3</span></button>
	</div>	


	<div id="bl_btn_list" class="btn_group" style="margin-bottom:10px;">
		<button class="btn btn_black"><span class="btn_text">1</span></button>
		<button class="btn btn_black"><span class="btn_text">2</span></button>
		<button class="btn btn_black"><span class="btn_text">3</span></button>
	</div>	
	<div id="bl_v_btn_list" class="btn_group vertical" style="margin-bottom:10px;">
		<button class="btn btn_black"><span class="btn_text">1</span></button>
		<button class="btn btn_black"><span class="btn_text">2</span></button>
		<button class="btn btn_black"><span class="btn_text">3</span></button>
	</div>	

	<div id="b_btn_list" class="btn_group" style="margin-bottom:10px;">
		<button class="btn btn_blue"><span class="btn_text">1</span></button>
		<button class="btn btn_blue"><span class="btn_text">2</span></button>
		<button class="btn btn_blue"><span class="btn_text">3</span></button>
	</div>	
	<div id="b_v_btn_list" class="btn_group vertical">
		<button class="btn btn_blue"><span class="btn_text">1</span></button>
		<button class="btn btn_blue"><span class="btn_text">2</span></button>
		<button class="btn btn_blue"><span class="btn_text">3</span></button>
	</div>	


</div>
<script type="text/javascript" src="js/JM.js"></script>
<script type="text/javascript" src="js/button.js"></script>
<script type="text/javascript" src="js/buttonlist.js"></script>
<script type="text/javascript">
	var w_btn = MUI.Button({
		id:"w_button"
	});
	var g_btn = MUI.Button({
		id:"g_button"
	});
	var bl_btn = MUI.Button({
		id:"bl_button"
	});
	var b_btn = MUI.Button({
		id:"b_button"
	});

	var w_i_l_btn = MUI.Button({
		id:"w_icon_l_button"
	});
	var w_i_r_btn = MUI.Button({
		id:"w_icon_r_button"
	});
	var g_i_l_btn = MUI.Button({
		id:"g_icon_l_button"
	});
	var g_i_r_btn = MUI.Button({
		id:"g_icon_r_button"
	});
	var bl_i_l_btn = MUI.Button({
		id:"bl_icon_l_button"
	});
	var bl_i_r_btn = MUI.Button({
		id:"bl_icon_r_button"
	});
	var b_i_l_btn = MUI.Button({
		id:"b_icon_l_button"
	});
	var b_i_r_btn = MUI.Button({
		id:"b_icon_r_button"
	});

	var w_btn_list = MUI.ButtonList({
		id:"w_btn_list"
	});
	var w_btn_list = MUI.ButtonList({
		id:"w_v_btn_list"
	});
	var g_btn_list = MUI.ButtonList({
		id:"g_btn_list"
	});
	var g_btn_list = MUI.ButtonList({
		id:"g_v_btn_list"
	});
	var bl_btn_list = MUI.ButtonList({
		id:"bl_btn_list"
	});
	var bl_btn_list = MUI.ButtonList({
		id:"bl_v_btn_list"
	});
	var b_btn_list = MUI.ButtonList({
		id:"b_btn_list"
	});
	var b_btn_list = MUI.ButtonList({
		id:"b_v_btn_list"
	});
	var $E = JM.event;
	// $E.on(b_btn.elem,"mousedown",function(){
	// 	alert("o");
	// });
</script>
</body>
</html>
